/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { TextInput, View, Dimensions, TouchableHighlight, StyleSheet, ImageBackground } from 'react-native';
import { Icon,  List, InputItem, Tabs, Button, TextareaItem, DatePicker, Accordion } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PListHelp} from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/************************************************************************************ Page */
export default class Help_Help extends PageBase {
    constructor(props) {
        super(props);
        // this.nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            helpList:[
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
                {
                    id:1,
                    set_name:"问题1",
                    item:[
                        {
                            id:1,
                            set_name:"小问题1",    
                        }
                    ]
                },
            ]
        };
    }

    /************************************************************************************ Life */
    componentDidMount() {
		// SplashScreen.hide();

		// HttpTemp.get({
        //     url: '/CPage/help/list.php',
        //     data:{},
		// 	suCess: (res)=> {
		// 		console.log('成功');
        //         // console.log(res);
        //         this.setState({helpList:res.data})
        //         console.log('this.state.helpList',this.state.helpList)
		// 	}
		// });
	}


    /************************************************************************************ Func */
    onChange = (key) => {
        console.log(key);
    }

    /************************************************************************************ Render */
    render() {
        const LItem = List.Item;
        return(
            <CPage>

                <CScroll bg='#efeff4' mt='96'>
                    {/* 搜索 star */}
                    <CRow pa='16 20' ma='16 20' df bg='#fff' ra='10' h='60' x='center' y='center'>
                        <CHand f='1'>
                            <TextInput placeholder='搜索' placeholderTextColor='#bfbfbf' multiline = {true} underlineColorAndroid='transparent' style={{height:30,padding:0,flex:1}} />
                        </CHand>
                    </CRow>
                    {/* 搜索 star */}
                    
                    {/* 问题列表 star */}
                    <Accordion style={{borderWidth:0,backgroundColor:'#fff'}} onChange={this.onChange}>

                        {this.state.helpList.map( item =>{
                            return (
                                // 循环一级类目
                                <Accordion.Panel header={<PListHelp text={item.set_name} />}>
                                    <List>
                                    {item.item.map( ques => {
                                        // 循环问题
                                        return(
                                            <LItem><CText size="30">{ques.set_name}</CText></LItem>
                                            // <LItem><CText style={styles.text} size="30">{ques.set_name}</CText></LItem>
                                        )
                                    })}
                                    </List>
                                </Accordion.Panel>
                            )
                        })}

                    </Accordion>
                    {/* 问题列表 end */}

                    {/* 留言按钮 star */}
                    <CRow bg='#fff' pa='40 20' x='center' y='center' pt='70'>

                        <CHand bg='#f8f8f8' py='20' ba='2 #e4e4e4' f='1'>
                            <CItemX x='center' y='center' f='1'>
                                <CIcon color="#5e5e5e" width="20" height="20" mr='8' icon={ Design.icon["person-center"] }></CIcon>
                                <CText color='#5e5e5e' size='34'>在线留言</CText>
                            </CItemX>
                        </CHand>
                        
                    </CRow>
                    {/* 留言按钮 star */}

                </CScroll>

                {/* header */}
				<PHeader nav={this.nav}>常见问题</PHeader>

            </CPage>
        )
    }
}
